<template>
  <div class="search-page">
    <van-search
        v-model="searchValue"
        placeholder="搜索我的收藏"
        show-action
        @search="onSearch"
    >
      <template #left>
        <div @click="onCancel" style="margin-right: 10px;">取消</div>
      </template>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div v-if="Array.isArray(searchResults) && searchResults.length > 0" class="search-results">
      <div v-for="result in searchResults" :key="result.tid" class="result-item">
        <van-image
            :src="result.dishImageUrl"
            width="100%"
            height="200"
            fit="cover"
            class="result-image"
        />
        <div class="result-info">
          <div class="top-info">
            <div class="author-section">
              <img :src="result.authorImageUrl" alt="作者头像" class="author-image" />
              <span class="author-name">{{ result.author }}</span>
            </div>
            <div class="like-section">
              <span class="popularity">{{ result.popularity }}</span>
              <van-icon name="good-job-o" class="like-icon" />
            </div>
          </div>
          <div class="description">
            {{ result.description }}
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="searched" class="no-results">
      没有找到相关结果
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const searchValue = ref('');
const searchResults = ref([]); // 确保初始化为一个空数组
const searched = ref(false);

const onSearch = async () => {
  try {
    if (searchValue.value.trim() === '') {
      return;
    }
    const response = await axios.get("http://127.0.0.1:9999/lanfan/web/todaymenu/search-exact", {
      params: {
        keyword: searchValue.value
      }
    });
    console.log('Fetched search results:', response.data); // 检查数据是否正确获取
    if (response.data.code === 200) {
      searchResults.value = response.data.date || []; // 确保返回的数据是一个数组
      searched.value = true;
    } else {
      console.error('Server returned an error:', response.data.message);
    }
  } catch (error) {
    console.error('Error searching menus:', error);
  }
};

const onCancel = () => {
  router.back(); // 返回上一页
};
</script>

<style scoped>
.search-page {
  padding: 20px;
}
.search-results {
  margin-top: 20px;
}
.result-item {
  margin-bottom: 20px;
}
.result-image {
  margin-bottom: 10px;
}
.result-info {
  padding: 10px;
  background-color: #f8f8f8;
}
.top-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.author-section {
  display: flex;
  align-items: center;
}
.author-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.author-name {
  font-weight: bold;
}
.like-section {
  display: flex;
  align-items: center;
}
.popularity {
  margin-right: 10px;
  font-weight: bold;
}
.like-icon {
  font-size: 20px;
}
.description {
  margin-top: 10px;
  color: #666;
}
.no-results {
  text-align: center;
  margin-top: 20px;
  color: #999;
}
</style>